<template>
	<view class="topic-list-box">
		<view v-for="(item) in list" :id="item.id" class="topic-item uni-padding-wrap" :key="item.key">
			<view class="uni-flex header">
				<view class="avatar-box">
					<image :src="item.user.avatar" class="avatar" mode="aspectFill" />
				</view>
				<view class="uni-flex metabox">
					<text class="nickname">{{ item.user.name}}</text>
					<view class="meta">
						<view>
							<text class="forum" :data-page="page">{{ page == "forum-topic" ? item.last_comment_at : (item.forum.name + " | " + item.created_at)}}</text>
						</view>
						<view class="type-tag-wrap" v-if="item.type_name_formatted">
							<text class="type-tag">{{ item.type_name_formatted }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="content" @tap="gotoCommentList" :data-key="item.key" :data-id="item.id">
				<text class="text">{{ item.title || item.main_floor.detail.content}}</text>
				<view class="uni-flex image-box" v-if="item.main_floor.detail.attachments.length">
					<image :src="img.url" class="attachment" mode="aspectFill" v-for="(img, _index) in item.main_floor.detail.attachments"
					 :key="img.key" />
				</view>
			</view>
			<view class="uni-flex footer">
				<view class="uni-flex-item uni-flex">
					<icon class="iconfont icon-view" />
					<text class="">{{ item.view_count }}</text>
				</view>
				<view class="uni-flex-item uni-flex">
					<icon class="iconfont icon-comment" />
					<text class="">{{ item.comment_count }}</text>
				</view>
				<view class="uni-flex-item uni-flex">
					<icon class="iconfont icon-like" />
					<text clas="">{{ item.main_floor.like_count}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			page: {
				type: String
			}
		},
		methods: {
			gotoCommentList: (e) => {
				let dataset = e.currentTarget.dataset;
				uni.navigateTo({
					url: '/pages/topic-comment/topic-comment?tid=' + dataset.id
				})
			}
		}
	}
</script>

<style lang="scss">
.topic-list-box {
	padding-top: 20upx;
	.topic-item {
		margin-bottom: 20upx;
		&:not(:last-child) {
			border-bottom: 10upx solid #eee;
		}
	
		.header {
			height: 80upx;
			margin-bottom: 20upx;
			align-items: center;
			.avatar-box {
				width: 80upx;
				height:80upx;
				box-sizing: content-box;
				padding-right: 20upx;
				.avatar {
					max-width: 80upx;
					max-height: 80upx;
					border-radius: 50%;
				}
			}
	
			.metabox {
				flex-direction: column;
				.meta {
					text {
						font-size: 80%
					}
					display: flex;
					color: #aaa;
					.forum {
						
					}
					.type-tag-wrap {
						margin-left: 10upx;
						.tag-report {
							background-color: lightblue;
						}
					}
	
				}
			}
		}
	
		.content {
			margin: 10px 0;
	
			.image-box {
				margin-top: 8px;
			}
	
			.attachment {
				height: 240upx;
				flex: 1;
				margin-right: 8upx;
	
				&:last-child {
					margin-right: 0;
				}
			}
		}
	
		.footer {
			.uni-flex-item {
				justify-content: center;
				align-items: center;
			}
			.iconfont {
				font-size: 32upx;
				color: #777;
				margin-right: 10upx;
			}
		}
	}
}
	
</style>
